<template>
  <view class="lists">
    <scroll-view
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      scroll-y="true"
      class="scroll-Y scroll"
      id="view1"
    >
      <BaseChart :empi="userInfo.empi" :chartInfo="heightInfo" id="height" />
      <BaseChart :empi="userInfo.empi" :chartInfo="weightInfo" id="weight" />
      <BaseChart :empi="userInfo.empi" :chartInfo="bmiInfo" id="bmi" />
      <BaseChart :empi="userInfo.empi" :chartInfo="whrInfo" id="whr" />
      <BloodInfo :empi="userInfo.empi" :type="type" id="sbp" />
      <BaseChart :empi="userInfo.empi" :chartInfo="heartInfo" id="heart_rate" />
      <BloodSugarInfo :empi="userInfo.empi" :type="type" id="fbg" />
      <BaseChart :empi="userInfo.empi" :chartInfo="oxygenInfo" id="spo2" />
      <!-- <view style="height: 660rpx;"></view> -->
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import BaseChart from './baseInfo.vue'
import BloodInfo from './bloodInfo.vue'
import BloodSugarInfo from './bloodSugarInfo.vue'
import { ref, reactive, nextTick } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { debounce } from '@/utils/tools'

const type = ref('')
const userInfo = ref({})

const scrollTop = ref(0)
const distanceArr = ref([])

const heightInfo = {
  title: '身高',
  value: 'height',
  color: '#5089FE',
  unit: '单位: cm',
  offsetX: 0,
  min: 0,
  max: 250,
  splitNumber: 5
}
const weightInfo = {
  title: '体重',
  value: 'weight',
  color: '#FF813C',
  unit: '单位: kg',
  offsetX: 0,
  min: 0,
  max: 200,
  splitNumber: 5
}
const bmiInfo = {
  title: 'BMI',
  value: 'bmi',
  color: '#1CD7AE',
  unit: '单位: kg/m²',
  offsetX: 15,
  min: 0,
  max: 100,
  splitNumber: 5,
  markLine: {
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 18.5,
        lineColor: '#1CD7AE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 23.9,
        lineColor: '#1CD7AE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}
const whrInfo = ref({
  title: '腰臀比',
  value: 'whr',
  color: '#8B89E9',
  unit: '',
  offsetX: 0,
  min: 0,
  max: 1.5,
  splitNumber: 5,
  markLine: {
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 0.85,
        lineColor: '#8B89E9',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      }
    ]
  }
})
const heartInfo = {
  title: '心率',
  value: 'heartRate',
  color: '#0CB67C',
  unit: '单位: 次/分',
  offsetX: 20,
  min: 0,
  max: 180,
  splitNumber: 6,
  markLine: {
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 60,
        lineColor: '#0CB67C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      },
      {
        value: 100,
        lineColor: '#0CB67C',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12
      }
    ]
  }
}
const oxygenInfo = {
  title: '血氧',
  value: 'spo2',
  color: '#50B5FE',
  unit: '单位: %',
  offsetX: 0,
  min: 0,
  max: 100,
  splitNumber: 5,
  markLine: {
    type: 'dash',
    dashLength: 8,
    data: [
      {
        value: 95,
        lineColor: '#50B5FE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: 10
      },
      {
        value: 100,
        lineColor: '#50B5FE',
        showLabel: true,
        labelAlign: 'right',
        labelPadding: 1,
        labelBgOpacity: 0,
        labelBgColor: '#fff',
        labelFontSize: 12,
        labelOffsetY: -10
      }
    ]
  }
}

onLoad((option) => {
  type.value = option.type ? option.type : ''

  nextTick(async () => {
    await getHeight('#height').then((height) => {
      distanceArr.value.push({ name: 'height', top: height })
    })
    await getHeight('#weight').then((height) => {
      distanceArr.value.push({ name: 'weight', top: height })
    })
    await getHeight('#bmi').then((height) => {
      distanceArr.value.push({ name: 'bmi', top: height })
    })
    await getHeight('#whr').then((height) => {
      distanceArr.value.push({ name: 'whr', top: height })
    })
    await getHeight('#sbp').then((height) => {
      distanceArr.value.push({ name: 'sbp', top: height })
    })
    await getHeight('#heart_rate').then((height) => {
      distanceArr.value.push({ name: 'heart_rate', top: height })
    })
    await getHeight('#fbg').then((height) => {
      distanceArr.value.push({ name: 'fbg', top: height })
    })
    await getHeight('#spo2').then((height) => {
      distanceArr.value.push({ name: 'spo2', top: height })
    })
    scrollTop.value = distanceArr.value.find((item) => type.value == item.name).top || 0
  })
})
onShow(() => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo
  whrInfo.value.markLine.data[0].value = userInfo.value.gender == '女性' ? 0.85 : 0.9
})

const getHeight = (str) => {
  return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery()
    query
      .select(str)
      .boundingClientRect((data) => {
        resolve(data.top)
      })
      .exec()
  })
}
</script>

<style lang="scss" scoped>
.lists {
  height: 100vh;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  .scroll-Y {
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
